<template>
  <div id="map" ref="map"></div>
</template>
<script>
import Vue from "vue";
import "./style/index.scss";
import mapboxgl from "mapbox-gl";
import { CircleLayerCom } from "@/components/circleLayer/index";
import { BasicComponents } from "./tools/basicComponent";
import NavCom from "./components/navIndex.vue";
import events from "events";

 
mapboxgl.accessToken =
  "pk.eyJ1IjoidGhpYmF1dGciLCJhIjoiMzg5MzQzOGMwYTJmOGNlODRkYzJjMDc5ZDEwNjNkOTEifQ.YPJ4ALWlOKnLPeaS5Ose7g";

window.mapboxgl = mapboxgl;
export default {
  data() {
    return {
      map: null,
      circleLayer: null,
      addDomController: null,
    };
  },
  mounted() {
    // const EventEmitter = require('events'); // EventEmitter引入方式1
    const EventEmitter = events.EventEmitter; // EventEmitter引入方式2
    this.myCustomEmitter = new EventEmitter();
    this.initMap();
  },
  methods: {
    initMap() {
      this.myCustomEmitter.on("load", (res1, res2) => {
        console.log(res1, res2, "Map==》load成功");
      });
      this.map = new mapboxgl.Map({
        container: this.$refs.map, // container ID
        // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
        // style: 'mapbox://styles/mapbox/dark-v11', // style URL
        // zoom: 10, // starting zoom
        // center: [-77.432, 25.0306] // starting position
        style: 'mapbox://styles/mapbox/satellite-v9', // style URL
        center: [-91.874, 42.76], // starting position [lng, lat]
        zoom: 12, // starting zoom
      });
      this.map.on("load", () => {
        this.myCustomEmitter.emit("load", "SUCCESS", "MAP");
        window.amap = this.map;
        this.circleLayer = new CircleLayerCom({ map: this.map, container: this.$refs.map });
        this.circleLayer.on("successAddLayer", (val) => {
          // console.log("successAddLayer-instance", val);
        });

        this.circleLayer.on("removeComponents", (val) => {
          this.removeDomControlCom();
        });

        this.circleLayer.on("hideComponents", (val) => {
          this.hideDomControlCom();
        });
        
        // 添加路由DOM
        this.addDomControlCom({
          container: "map",
        });
      });
    },

    // 添加用于控制路由的Dom
    addDomControlCom(options) {
      let self = this;
      this.addDomController = new BasicComponents(options);
      this.addDomController.on("load", (component) => {
        console.log(component, "component");
      });
      const navVue = Vue.extend(NavCom);
      const navInstance = new navVue({
        methods: {
          getSelf() {
            return self;
          },
        }
      });
      this.addDomController.createComponent(navInstance);
    },

    removeDomControlCom() {
      let removeViewIds = Array.from(this.addDomController.viewMap.keys());
      this.addDomController.removeComponents(removeViewIds);
    },

    hideDomControlCom() {
      let hideViewIds = Array.from(this.addDomController.viewMap.keys());
      this.addDomController.hideComponents(hideViewIds);
    },
  },
};
</script>
